<template>
	<view>
		<u-navbar
			title="我的活动"
			leftText="返回"
			bgColor="#ffffff"
			@leftClick="leftClick"
			:autoBack="false"
		>
		</u-navbar>
		
		<view style="margin-top: 80px;">    
			<u-row customStyle="padding: 0px 15px 10px 0px">
				
			</u-row>
		</view>
		
		<view style="padding: 10px ;min-height: 345px;">
			<u-grid
					:border="false"
					col="2"
			>
				<u-grid-item
						v-for="i in myActivity"
						:key="i.eventId"
				>
					<view class="item" @click="goActivityDetail(i.eventId)">
						<view class="imgBk" :style="{backgroundImage: 'url(' + i.eventImgUrl + ')'}">
							
						</view>
						<view class="itemContent">
							<view style="font-size: 12px;font-weight: 200;color: darkorange;">{{i.startTime}}~{{i.endTime}}</view>
							<view class="line1" style="font-size: 12px;font-weight: 600;margin-bottom: 2px;">{{i.title}}</view>
							<view class="line2" style="font-size: 12px;font-weight: 200;height: 32px;">{{i.description}}</view>
							<view v-if="i.status == '已通过'" style="font-size: 12px;font-weight: 200;color: green">{{i.status}}</view>
							<view v-if="i.status == '报名中'" style="font-size: 12px;font-weight: 200;color: purple">{{i.status}}</view>
							<view v-if="i.status == '已结束'" style="font-size: 12px;font-weight: 200;color: red">{{i.status}}</view>
							<view v-if="i.status == '进行中'" style="font-size: 12px;font-weight: 200;color: blue">{{i.status}}</view>
							<view v-if="i.status == '未通过'" style="font-size: 12px;font-weight: 200;color: aqua">{{i.status}}</view>
						</view>
					</view>
				</u-grid-item>
			</u-grid><br><br><br>
		</view>
		
		
	</view>
</template>

<script>
import { getActivityByUserId } from '../../../utils/activity';
	
	export default{
		data(){
			return {
				myActivity: {},
				modealActivity: {},
				statusShow: false,
				userId: undefined,
				status:'',
			}
		},
		methods:{
			leftClick(){
				// #ifdef H5
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack(1)
					return;
				}
				//使用vue-router返回上一级
				let a = this.$router.go(-1)
				if (a == undefined) {
					//重新定向跳转页面
					uni.reLaunch({
						url: '/pages/view/homepage/homepage'    
					})   
				}
				return;
				// #endif
				uni.navigateBack(1)
			},
			formatDate2(time){
				return time.slice(0, 10)
			},
			goActivityDetail(id){
				console.log(id)
				uni.navigateTo({
					url:`/pages/view/activity/activityDetail?id=${id}`
				})
			}
		},
		onLoad: function(option) {
			console.log(option.id)
			this.userId = option.id
			let that = this
			getActivityByUserId(that.userId,'',1,100).then(res => {
				if(res.code == 0){
					that.myActivity = res.data.eventList
					console.log(res)
					that.myActivity.forEach(e => {
						e.startTime = that.formatDate2(e.startTime)
						e.endTime = that.formatDate2(e.endTime)
					})
					that.modealActivity = that.myActivity
					
				}
			})
		}
	}
</script>

<style scoped>
	.title{
		font-weight: 700;
		font-size: 40rpx;
		margin-left: 10px;
	}
	.imgBk{
		width: 100%;height: 80px;
		background-size: 100% 100%;
		border-top-left-radius: 7px;
		border-top-right-radius: 7px;
	}
	.line1{
		display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;
	}
	.line2{
		display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;
	}
	.item{
		width: 100%;margin: 0 auto;width: 87%;margin-bottom: 20px;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
		border-radius: 7px;
	}
	.itemContent{
		padding: 6px;
		height: 80px;
	}
</style>